<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/10
  Time: 8:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="dist/jquery/jquery-1.8.3.js" type="text/javascript"></script>
<html>
<head>
    <title>多文件上传</title>
    <style type="text/css">
        /**{
            border-style: solid;
        }*/
        #id-form{
            padding: 20px 40%;
        }
        #id-fliesupload{
            border-style: solid;
        }
    </style>
</head>
<body>
<hr>
<div id="id-form">
    <form action="fileupload" method="post" enctype="multipart/form-data">
        <table id="id-fliesupload" border="1">
            <tr id="id-addfile_1">
                <td><input type="text" name="id" value="1"></td>
                <td><input type="text" name="title" value="文件标题"></td>
                <td><input type="file" name="upload" value="选择文件"></td>
                <td><input type="button" name="delete" value="删除" onclick="single2delete(this)"></td>
            </tr>
            <tr id="id-operator">
                <td><input type="button" value="新增" id="id-new"></td>
                <td><input type="reset" value="重置"></td>
                <td><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>
</div>

<hr>

</body>
</html>
<script type="text/javascript">
    $(function(){

        /**
         * 新增
         * @type {number}
         */
        var i=1;
        $("#id-new").click(function () {
            var id2curr='id-addfile_'+i;
            var id2next='id-addfile_'+(i+1);
            var $id2curr='#'+id2curr;
            var $id2next='#'+id2next;

            $($id2curr+" input[name=id]").attr('value',i);

            var str2next='<tr id="'+id2next+'" >'+$($id2curr).html()+'</tr>';

            $($id2curr).after(str2next);
            $($id2next+" input[name=id]").attr('value',i+1);

            i=i+1;
        });

        $()





    });

    /**
     * 删除
     */
    function single2delete(obj){
        $(obj).parents('tr').remove();

        var obj2tr2array=$("td").parents('tr[id^=id-addfile_]');
        var length=obj2tr2array.length;
        /* console.log(obj2tr2array);
         console.log(obj2tr2array.length);*/

        for (var i=0;i<length;i++){
            /* console.log(obj2tr2array[i]);*/

            var obj2i=obj2tr2array[i];
            var id2str='id-addfile_'+(length-i);
            $(obj2i).attr('id',id2str);

            $(obj2i).find('input[name=id]').attr('value',(length-i));
            console.log($(obj2i).find('input[name=id]').attr('value'));

        }
    }


</script>
